<template>
  <div class="ict-menber-view">
    <div class="menberBuy" v-touch:tap="buy" v-el:btn>
      <p>限时优惠 ¥68
        <span class="del">¥88</span>
        &nbsp还剩<span style="color: red">&nbsp{{leftDay}}</span>天
      </p>
    </div>
    <scroller :lock-x="true" scrollbar-y v-ref:scroller :height.sync="scrollerHeight">
      <div>
        <div class="banner" v-el:banner>
          <div v-touch:tap="goHome" class="go-home">首页</div>
          <!-- <div v-touch:tap="goQR" class="QRcode">
            <img src="../../../static/image/menber/QRicon.png" alt="">
            <div class="">分享</div>
          </div> -->
          <img src="../../../static/image/activities/banner.png" alt="">
        </div>
        <div class="scrollerImg" v-el:img>
          <img src="../../../static/image/menber/scroller.png" alt="">
        </div>
        <div class="financial">
          <!--<div class="tit">-->
            <!--理财入门课-->
          <!--</div>-->
          <!-- 播放 -->
          <div class="ac-audio" v-touch:tap="clickPlayCourse">
            <div class="title"></div>
            <div class="playBox">
              <img v-if="playImg" src="../../../static/image/menber/play.png" alt="">
              <img v-else="playImg" src="../../../static/image/menber/pause.png" alt="">
              <div v-if="play" style="color:#00b0f0;">试听   第一节——什么是财富自由</div>
              <div v-else="play">试听   第一节——什么是财富自由</div>
            </div>
            <audio id="s" src="https://source.ichangtou.com/file/sound/d9a3e3f2/1/4862hW08rmk_01_01.mp3"></audio>
          </div>
          <div class="con">
            </br>
            <p class="ac-title">课程简介</p>
            <span style="color:#34ace0;">适合对象</span> ：零基础、想学习理财投资小白。
            <br>
            专为零基础用户量身打造的理财投资入门课，帮你建立正确的投资理念、手把手带你攒下投资的第一桶金、认识市场上靠谱的投资品、掌握基础财报知识，不再被金钱的问题所困扰！
            </br>
            <p class="ac-title">讲师介绍</p>
            <span style="color:#34ace0;">小熊之家</span>
            <br>
            长投网联合创始人兼任CEO，私募基金经理，资深投资者10余年，践行过美股，港股，A股，涉及股票，期权，涡轮、债券等。
            <br>
            从2007年到2015年，个人美股投资累计收益263%，平均年化收益率12%；从2013年到2016年，A股投资累计收益268%，平均年化收益率32.7%。
            <p class="ac-title">课程亮点</p>
            <span style="color:#34ace0;">生动有趣:</span> 幽默的语言、好玩的故事、丰富的案例
            <br>
            <span style="color:#34ace0;">课后作业:</span> 学完之后马上用，及时巩固学习效果
            <br>
            <span style="color:#34ace0;">时间灵活:</span> 在线课程、每个小节10分钟左右
            <br>
            <span style="color:#34ace0;">助教支持:</span> 48小时内批改作业、回答疑问
            <br>
            </br>
            <p class="ac-title">学习收获</p>
            <span style="color:#34ace0;">正确的理念:</span> 学习理财投资并不难、越早越好
            <br>
            <span style="color:#34ace0;">了解投资品:</span> 市场上常见投资品收益与风险
            <br>
            <span style="color:#34ace0;">什么是财报:</span> 投资中最重要的工具-财务报表
            <br>
            </br>

            <p class="ac-title">学员故事</p>
            <ul>
              <li v-touch:tap="one" class="btn-s">投资需趁早靠着投资改变生活</li>
              <li v-touch:tap="two" class="btn-s">单身狗月定投 五年后买房</li>
            </ul>

            <p class="ac-title">注意事项</p>
            <span style="color:#34ace0;">有效期:</span> 120天，同时用户享有1次延期30天的机会。购买后课程最晚在6个月内激活，激活后将计入120天倒计时
            <br>
            <span style="color:#34ace0;">作业:</span> 每一课都有作业、提交作业后才能进入下一课学习
            <br>
            <span style="color:#34ace0;">课程时长:</span> 3-4小时
            <br>
            <span style="color:#34ace0;">学习形式:</span> 在线学习
          </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import Badge from 'vux/badge'
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import {Flexbox, FlexboxItem} from 'vux/flexbox'
import Scroller from 'vux/scroller'
import {MSITE_URL} from '../../frame/serverConfig'
import {userGetters, menberGetters, courseRecordsGetters} from '../../vuex/getters'
import {dealType, pay, transactionChannel} from '../../util/pay/dealHelper'
import {Device, platformMap} from '../../plugin/device'
import {Agent} from '../../plugin/agent'
import {activitiesBinding} from '../../vuex/activities/actions'
import {courseRecordActions} from '../../vuex/actions'
import ictData from '../../statistics/ictData'
import {statisticsMap} from '../../statistics/statisticsMap'

export default {
  vuex: {
    actions: {
      activitiesBinding: activitiesBinding,
      loadAllExpenseRecords: courseRecordActions.loadAllExpenseRecords // 下载 用户 我的课程 信息
    },
    getters: {
      expenseRecords: courseRecordsGetters.expenseRecords, //我的课程列表
      userName: userGetters.userName, //用户名
      userId: userGetters.userId, //用户id
      isLogin: userGetters.isLogin, //是否登录
      isMenberLegal: menberGetters.isMenberLegal //是否是合伙人
    }
  },
  data () {
    return {
      scrollerHeight: '600px',
      playImg: true,
      play: false,
      leftDay: 0
    }
  },
  route: {
    data () {
      this.loadAllExpenseRecords()
      //统计进入页面
      ictData.track(statisticsMap.ACTIVITIES_RECOMMEND, {'受访页面': window.location.href, '访问页面': '#' + window.location.href.split('!')[1], '被邀请id': this.userId, '邀请人id': this.$route.query.userid ? this.$route.query.userid : '0'})
      this.setViewWxShareConfig ()
      setTimeout (() => {
        this.setViewWxShareConfig()
      }, 2000)
      // console.log('userid', this.$route.query.userid);
      setTimeout (() => {
        this.setScrollerHeight()
      }, 100)

      let staStr = ('2017-07-23 10:15:00').replace(/-/g, '/')
      let staDate = new Date(staStr)

      this.leftDay = parseInt((staDate - new Date()) / (1000 * 3600 * 24)) + 1
    }
  },
  methods: {
    // 点击播放
    clickPlayCourse () {
      // 播放统计
      ictData.track(statisticsMap.CLICK_PLAY, {'点击试听': '1'})
      if (this.play) {
        document.getElementById('s').pause()
        this.play = false
        this.playImg = true
      } else {
          document.getElementById('s').play()
          this.play = true
          this.playImg = false
      }
    },
    /**
     * 设置滚动条高度
     */
    setScrollerHeight () {
      // 设置滚动条高度为 页面高度-titlebar高度-tabbar高度
      const me = this
      const {btn} = this.$els
      // const {tabBar} = me.$parent.$els

      me.scrollerHeight = (window.document.body.offsetHeight - btn.offsetHeight) + 'px'
      setTimeout(function () {
        me.$nextTick(() => {
          me.$refs.scroller.reset({
          top: 0
        })
      })
      }, 150)
    },
    one () {
      this.$router.go('/interview-record?id=7')
    },
    two () {
      this.$router.go('/interview-record?id=2')
    },
    // 支付失败
    onPayFail (err) {
      this.hideLoading()
      Object.assign(this.statisticData, {
        '原因': err.reason
      })
    },
    /**
     * 取出参数
     */
    // getQueryString(name) {
    //   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    //   var r = window.location.search.substr(1).match(reg);
    //   if (r != null) return unescape(r[2]);
    //   return null;
    // },
    /**
     * 设置分享选项
     */
    setViewWxShareConfig () {
      this.shareConfig = {
        title: '加入合伙人',
        desc: '加入合伙人',
        link: `${MSITE_URL}index.html#!/menber-recommend?userid=${this.userId}`,
        imgUrl: ``
      }
      this.onViewChange()
      // window.alert(this.shareConfig.link)
      // window.alert('设置分享')
      console.log('setViewWxShareConfig设置分享选项');
    },
    goHome () {
      // window.history.back()
      this.$router.go('/main')
    },
    goQR () {
      window.sessionStorage.setItem('urlQRcode', `menber-recommend?`)
      this.$router.go('/menber-recommend-qr')
    },

    buy () {
      // console.log('1111', this.expenseRecords);
      // 是否有买过活动课程
      for (let i = 0; i < this.expenseRecords.length; i++) {
        if (this.expenseRecords[i].subjectId === 1) {
          this.showAlert('你已经购买过此课程,去听课')
          this.$router.go('/subject-detail-P?subjectid=1&position=0')
          return
        }
      }
      if (!this.isLogin) {
        this.showAlert('请登录或注册')
        this.$router.go('/entry')
      } else if (this.isMenberLegal) {
        // window.alert('您已经是合伙人')
        this.payByChannel('wechat')
      } else {
        this.payByChannel('wechat')
      }
    },

    payByChannel (channel) {
      this.showLoading()
      //根据环境判断合伙人价格
      let price = 68
      if (MSITE_URL === 'https://h5.ichangtou.com/partner/') {
        price = 68
      } else if (MSITE_URL === 'https://h5test.ichangtou.com/xia/partner/') {
        price = 0.01
      }
      // Object.assign(this.statisticData, {
      //   '支付方式': Device.platform === platformMap.WEB ? channel === 'wechat' ? '微信-web' : '支付宝-web' : channel === 'wechat' ? '微信-app' : '支付宝-app',
      //   '入口页': getLocalCache('statistics-entry-page') && getLocalCache('statistics-entry-page').entryPage
      // })

      // if (Device.platform === platformMap.WEB && Agent.isWx && parseInt(this.sum) >= 3000) {
      //   setLocalCache('isZhoulePay', true)
      // }

//      this.$dispatch(eventMap.STATISTIC_EVENT, statisticsMap.PAY_CONFIRM_TAP, {})
      const me = this
      const trade = {
        sum: price,
        body: '长投合伙人',
        openId: Device.platform === platformMap.WEB && Agent.isWx ? parseInt(price) >= 3000 ? JSON.parse(window.sessionStorage.getItem('zhouLe')).openId : JSON.parse(window.sessionStorage.getItem('wxOauth2')).openId : null,
        deal: {
          cardUsed: false,
          channel: (Device.platform === platformMap.ANDROID || Device.platform === platformMap.IOS) ? 'APP' : 'MAPP',
          items: [{
            coupon: null,
            dealType: dealType.BUY,
            itemId: 1,
            mchantType: 1,
            misc: '',
            price: price
          }]
        }
      }

      pay({
        channel: channel,
        trade: trade
      }).then(
        result => {
          this.hideLoading()
          // 绑定上线 parentId
          let param = {}
          param.parentId = this.$route.query.userid
          this.activitiesBinding(JSON.stringify(param))
          window.alert('支付成功')
          // this.updateMenber();
          this.$route.router.go('/subject-detail-P?subjectid=1&position=0')
          window.location.reload()
          if (result && result.type && (result.type === transactionChannel.WX_CODE)) {
            // 扫码支付
            // me.showCodePanel(result.url)
          } else {
            // 其他支付 （不包括支付宝网页支付）
            // me.goToPaySuccess()
          }
        }
      ).catch(
        (err) => me.onPayFail(err)
      )
    }
  },
  components: {
    IctTitlebar,
    IctButton,
    IctItem,
    Flexbox,
    FlexboxItem,
    Badge,
    Scroller
  }
}
</script>
<style lang="less">
  @import "../../assets/styles/icon.less";
  .ict-menber-view{
    p {
      margin: 0;
    }

    .btn-s {
      color: #00b0f0;
      text-decoration:underline;
    }
    .ict-item:active {
      background-color: #ccc;
      color:black;
    }
    .into-icon:before{
      font-family: 'myicon';
      content: '\e913';
      color: #898989;
    }
    .ict-btn{
      width: 6.5rem;
      height: 1.8rem;
      border: 1px solid #00b0f0;
      border-radius: 5px;
      background: #fff;
      min-height: 0;
      padding: 0;
      color: #00b0f0;
      font-size: 0.85rem;
    }
    .itemOnFocus{
      background-color: black;
      color: white;
    }
  }
  .banner {
    .QRcode {
      display:flex;
      img {
        flex: 1;
        width:1rem;
        height:1rem;
        line-height:1rem;
      }
      div {
        flex: 3;
      }
      height:1rem;
      line-height:1rem;
      color: white;
      top:0.5rem;
      left: 1rem;
      font-size: 12px;
      position:absolute;
      z-index: 2;
    }
    .go-home {
      color: white;
      top:0.5rem;
      right: 1rem;
      font-size: 12px;
      position:absolute;
      z-index: 2;
    }
    img {
      width: 100%;
    }
  }
  .privilege {
    color:#aaa;
    /*height: 15rem;*/
    background-color: white;
    margin:0 0.5rem 0 0.5rem;
    text-align:left;
    font-size:12px;
    padding:0.5rem;
    ul {
      list-style-type:none;
      width:70%;
      margin: 0 auto;
    }
    img {
      width:100%;
    }
  }
  .menberBuy {
    width:100%;
    bottom:0;
    position:fixed;
    z-index:10;
    /*padding:0.5rem;*/
    font-size:12px;
    text-align:center;
    background-color: white;
    .del {
      text-decoration: line-through;
      color:#e0e0e0;
      font-size: 0.8rem;
    }
    p {
      color:white;
      height:44px;
      line-height:44px;
      background-color:#00b0f0;
      /*border-radius: 5px;*/
    }
  }
  .scrollerImg {
    text-align: center;
    margin-bottom:-0.4rem;
    img {
      width:95%;
    }
    height:1rem
  }
  .sharePartner {
    color:#aaa;
    /*height: 15rem;*/
    background-color: white;
    margin:0 0.5rem 0 0.5rem;
    text-align:center;
    font-size:12px;
    padding:0.5rem;
    text-align:left;
    ul {
      list-style-type:none;
      width:70%;
      margin: 0 auto;
    }
    img {
      width:100%;
    }
  }
  .partnerTitle {
    margin:2rem;
    text-align:center;
  }
  .line {
    height:1px;
    background-color:#F2F2F2;
    margin:2rem;
  }
  .financial {
    margin: 0.5rem;
    background-color: white;
    color: #34ace0;
    /*width: 100%;*/
    text-align: center;
    .tit {
      padding: 1.5rem;
      padding-bottom: 1rem;
      font-size: 0.8rem;
    }
    .con {
      color: #aaa;
      width: 70%;
      margin: 0 auto;
      text-align: left;
      padding-bottom: 1rem;
      line-height: 1.5rem;
    }
    img {
      width: 100%;
      background-color: white;
    }
  }
  .strong {
    color: #de3d3d;
    font-size: 0.9rem;
  }
  .btnS {
    text-decoration: underline;
    line-height: 2.5rem;
  }
  .ac-title{
    color:white;
    background-color:#00b0f0;
    text-align:center;
    width:30%;
  }
  .ac-audio {
    /*width:40%;*/
    font-size:12px;
    border-left: none !important;
    border-right: none !important;
    margin: 0.5rem auto;
    background-color:white;
    padding:0.5rem;
    border-style:solid;
    border-width:1px;
    .title{
      /*margin:0.5rem;*/
      color:#444;
    }
    .playBox{
      display:flex;
      margin:0.5rem 0;
      img {
        width:2rem;
        height:2rem;
      }
      div{
        flex:1;
        color:#898989;
        line-height:2rem;
        margin:0 0.5rem;
      }
    }
  }
</style>
